import { h, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 准备容器
// const div = document.createElement('div')
// div.setAttribute('class', 'xtx-message-container')
// document.body.appendChild(div)

// h函数创建动态dom
const divVNode = h('div', { class: 'xtx-message-container' })
render(divVNode, document.body)
const div = divVNode.el
// 定时器
export default ({ type, message }) => {
  // 实现：根据xtx-message.vue渲染消息提示
  // 1. 导入组件
  // 2. 根据组件创建虚拟节点
  const vnode = h(XtxMessage, { type, message })
  // 3. 准备一个DOM容器
  // 4. 把虚拟节点渲染DOM容器中
  render(vnode, div)
  setTimeout(() => {
    render(null, div)
  }, 3000)
}
